import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:provide/provide.dart';
import 'package:qgchat/common/global/global.dart';
import 'package:qgchat/states/states_model/user.dart';
import 'package:qgchat/widgets/tipsDialog.dart';

class UserCard extends StatelessWidget {
  const UserCard({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      width: px(690),
      padding: EdgeInsets.only(
        left: px(30),
        right: px(30),
        top: px(40),
        bottom: px(40),
      ),
      decoration: BoxDecoration(
        color: col('ffffff'),
        borderRadius: BorderRadius.all(Radius.circular(px(16))),
        boxShadow: [
          BoxShadow(
            color: col('edeff2'),
            offset: Offset(0, 5),
            blurRadius: 10,
            spreadRadius: 2,
          )
        ],
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Row(
            children: <Widget>[
              /// 用户头像
              GestureDetector(
                onTap: () {
                  final user = Provide.value<UserState>(context);
                  final info = user.info;
                  final isLogin = info != null;
                  if (isLogin) {
                    goPage(context, '/basicInfo');
                  } else {
                    TipsDialog.login(
                      context,
                      () {
                        goPage(context, '/phoneLogin');
                      },
                    );
                  }
                },
                child: Container(
                  width: px(110),
                  height: px(110),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(px(55))),
                  ),
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(px(55)),
                    child: _Avatar(),
                  ),
                ),
              ),

              /// 用户名部分
              Container(
                margin: EdgeInsets.only(left: px(30)),
                width: px(368),
                child: _UserInfo(),
              ),

              /// 按钮
              _Button(),
            ],
          ),
          Provide<UserState>(
            builder: (context, child, user) {
              final info = user.info;
              final isLogin = info != null;

              if (isLogin) {
                return Container(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      /// 关注
                      _UserData(),

                      /// 分割线
                      Container(
                        width: px(1),
                        height: px(50),
                        color: col('edeff2'),
                      ),

                      /// 金币
                      _GoldCount(),
                    ],
                  ),
                );
              } else {
                return Container();
              }
            },
          ),
        ],
      ),
    );
  }
}

class _Avatar extends StatelessWidget {
  const _Avatar({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final info = Provide.value<UserState>(context).info;

    /// 已登录
    if (info != null) {
      if (info.memberHead != null) {
        return CachedNetworkImage(
          imageUrl: "${info.memberHead}",
          fit: BoxFit.cover,
          errorWidget: (context, url, error) {
            return Config.errorNetImage;
          },
        );
      } else {
        return Image.asset(
          'assets/images/icon/unloggedUser.png',
          fit: BoxFit.cover,
        );
      }
    }

    /// 未登录
    return Image.asset('assets/images/icon/unloggedUser.png');
  }
}

class _UserInfo extends StatelessWidget {
  const _UserInfo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Provide<UserState>(
      builder: (context, child, user) {
        final info = user.info;
        // 未登录
        if (info == null) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Hi 等你好久了',
                style: TextStyle(fontSize: px(35), fontWeight: FontWeight.bold),
              ),
              Text(
                '登录后可以关注喜欢的主播哦~',
                style: TextStyle(
                  fontSize: px(24),
                  height: 1.5,
                  color: col('bfc2cc'),
                ),
              ),
            ],
          );
        }

        final isAnchor = info.memberType == 1;

        // 登录，主播
        if (isAnchor) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text.rich(
                TextSpan(
                  children: [
                    TextSpan(
                      text: info.memberNickname,
                      style: TextStyle(
                        fontSize: px(35),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    TextSpan(
                      text: '   ID:${info.id}',
                      style: TextStyle(
                        fontSize: px(24),
                        color: col('bfc2cc'),
                      ),
                    )
                  ],
                ),
                style: TextStyle(
                  height: 1.5,
                ),
              ),
              Container(
                height: px(34),
                padding: EdgeInsets.symmetric(horizontal: px(13)),
                margin: EdgeInsets.only(top: px(5)),
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.all(Radius.circular(px(17))),
                  color: col('ffb21c'),
                ),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Container(
                      width: px(20),
                      height: px(18),
                      child: Image.asset('assets/images/icon/LVIcon.png'),
                    ),
                    Provide<UserState>(
                      builder: (context, child, user) {
                        return Text(
                          '  LV ${user?.anchorInfo?.anchorStarts}',
                          style:
                              TextStyle(fontSize: px(22), color: col('ffffff')),
                        );
                      },
                    ),
                  ],
                ),
              )
            ],
          );
        }

        // 登录，用户
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text.rich(
              TextSpan(
                children: [
                  TextSpan(
                    text: info.memberNickname,
                    style: TextStyle(
                        fontSize: px(35), fontWeight: FontWeight.bold),
                  ),
                  TextSpan(
                    text: '   ID:${info.id}',
                    style: TextStyle(fontSize: px(24), color: col('bfc2cc')),
                  )
                ],
              ),
              style: TextStyle(
                height: 1.5,
              ),
            ),
          ],
        );
      },
    );
  }
}

class _UserData extends StatelessWidget {
  const _UserData({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final user = Provide.value<UserState>(context);
    final info = user.info;
    final isLogin = info != null;

    if (!isLogin) {
      return SizedBox.shrink();
    }

    final isAnchor = info.memberType == 1;

    return GestureDetector(
      behavior: HitTestBehavior.opaque,
      onTap: () {
        goPage(context, '/attentionOrFans');
      },
      child: Builder(
        builder: (context) {
          /// 是主播
          if (isAnchor) {
            return Container(
              width: px(300),
              child: Column(
                children: <Widget>[
                  Text(
                    "${user.anchorInfo.anchorFans ?? 0}",
                    style: TextStyle(
                      fontSize: px(43),
                      color: col('303133'),
                    ),
                  ),
                  Text(
                    '粉丝',
                    style: TextStyle(
                      fontSize: px(31),
                      color: col('303133'),
                    ),
                  ),
                  Container(height: px(40)),
                ],
              ),
            );
          }

          /// 不是主播
          else {
            return Container(
              width: px(300),
              child: Column(
                children: <Widget>[
                  Text(
                    "${info.memberFollow ?? 0}",
                    style: TextStyle(
                      fontSize: px(43),
                      color: col('303133'),
                    ),
                  ),
                  Text(
                    '关注',
                    style: TextStyle(
                      fontSize: px(31),
                      color: col('303133'),
                    ),
                  ),
                  Container(height: px(40)),
                ],
              ),
            );
          }
        },
      ),
    );
  }
}

class _GoldCount extends StatelessWidget {
  const _GoldCount({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final user = Provide.value<UserState>(context);
    final info = user.info;

    return Container(
      width: px(300),
      child: Column(
        children: <Widget>[
          Text(
            "${info.gold ?? 0}",
            style: TextStyle(
              fontSize: px(43),
              color: col('303133'),
            ),
          ),
          Text(
            '金币',
            style: TextStyle(
              fontSize: px(31),
              color: col('303133'),
            ),
          ),
          SizedBox(height: px(8)),
          Container(
            height: px(32),
            padding: EdgeInsets.symmetric(
              horizontal: px(15),
              vertical: px(7),
            ),
            decoration: BoxDecoration(
              color: col('e6deff'),
              borderRadius: BorderRadius.all(Radius.circular(px(16))),
            ),
            child: Text(
              '邀请新用户得5金币',
              style: TextStyle(
                fontSize: px(18),
                color: col('745af6'),
                height: 1,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _Button extends StatelessWidget {
  const _Button({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Provide<UserState>(
      builder: (context, child, user) {
        final info = user.info;
        final isLogin = info != null;

        return Container(
          width: px(120),
          height: px(60),
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.centerLeft,
              end: Alignment.centerRight,
              colors: [col('ff8660'), col('ff7098')],
            ),
            borderRadius: BorderRadius.all(Radius.circular(px(30))),
          ),
          child: Builder(
            builder: (context) {
              /// 已登录
              if (isLogin) {
                return FlatButton(
                  onPressed: () {
                    goPage(context, '/recharge');
                  },
                  padding: EdgeInsets.all(0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(px(30))),
                  ),
                  child: Text(
                    '充值',
                    style: TextStyle(color: col('f2f6ff')),
                  ),
                );
              }

              /// 未登录
              else {
                return FlatButton(
                  onPressed: () {
                    goPage(context, '/phoneLogin');
                  },
                  padding: EdgeInsets.zero,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.all(Radius.circular(px(30))),
                  ),
                  child: Text(
                    '登录',
                    style: TextStyle(color: col('f2f6ff')),
                  ),
                );
              }
            },
          ),
        );
      },
    );
  }
}
